<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  isShowEcharts.value = true;
  option.value = {
    color: ["#39C670 ", "#3B82F6", "#28D892", "#FF5639"],
    grid: {
      left: "20px",
      top: "40px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      x: "center"
    },
    tooltip: {
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      // data: response.xaxis
      data: ["2024-01", "2024-02", "2024-03", "2024-04", "2024-05", "2024-06", "2024-07", "2024-08"]
    },
    yAxis: {
      name: "tCO2e",
      type: "value"
    },
    series: [
      // {
      //   data: response.panelList.filter(item => item.title == "实际用量")[0].details.map(item => (item.value != null ? item.value : 0))
      //     ? response.panelList.filter(item => item.title == "实际用量")[0].details.map(item => (item.value != null ? item.value : 0))
      //     : [0, 0, 0, 0, 0, 0, 0],
      //   type: "bar",
      //   name: "实际用量",
      //   stack: "total",
      //   barWidth: "25px",
      //   label: {
      //     show: true,
      //     color: "black"
      //   },
      //   emphasis: {
      //     focus: "series"
      //   }
      // },
      {
        // data: response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
        //   ? response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
        //   : [0, 0, 0, 0, 0, 0, 0],
        data: [34128.06, 31058.18, 26225.85, 22989.32, 14847.11, 12461.93, 12529.38, 13856.97],
        type: "bar",
        name: "创新中心一期",
        stack: "total",
        barWidth: "25px",
        label: {
          show: true,
          color: "black"
        },
        emphasis: {
          focus: "series"
        }
      }
      // {
      //   // data: response.panelList.filter(item => item.title == "NaCLO")[0].details.map(item => (item.value != null ? item.value : 0))
      //   //   ? response.panelList.filter(item => item.title == "NaCLO")[0].details.map(item => (item.value != null ? item.value : 0))
      //   //   : [0, 0, 0, 0, 0, 0, 0],
      //   data: [500, 600, 700, 400, 300, 320, 410],
      //   type: "bar",
      //   name: "工厂B",
      //   stack: "total",
      //   barWidth: "25px",
      //   label: {
      //     show: true,
      //     color: "black"
      //   },
      //   emphasis: {
      //     focus: "series"
      //   }
      // }
    ]
  };
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
